<template>
  <div>
    <div class="sidebar-container" :class="{ 'is-closed': isSidebarClosed }">
      <el-menu
        default-active="user"
        menu-trigger="click"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-sub-menu index="1">
          <template #title>
            <i class="el-icon-menu"></i>
            <span>基本信息管理</span>
          </template>
          <el-sub-menu index="2">
            <template #title><i class="el-icon-s-custom"></i>住户信息管理</template>
            <el-menu-item index="user"><i class="el-icon-postcard"></i>基础信息</el-menu-item>
            <el-menu-item index="order"><i class="el-icon-bank-card"></i>门禁管理</el-menu-item>
            <el-menu-item index="system"><i class="el-icon-house"></i>房屋状态</el-menu-item>
            <el-menu-item index="system"><i class="el-icon-bank-card"></i>缴费信息</el-menu-item>
            <el-menu-item index="system"><i class="el-icon-pie-chart"></i>能耗消耗状态</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title><i class="el-icon-setting"></i>车位信息</template>
            <el-menu-item index="globalSettings"><i class="el-icon-bank-card"></i>车位状态</el-menu-item>
            <el-menu-item index="globalSettings"><i class="el-icon-bank-card"></i>所属车牌</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title><i class="el-icon-setting"></i>预约管理</template>
          <el-sub-menu index="5">
            <template #title><i class="el-icon-setting"></i>场馆预约和使用</template>
            <el-menu-item index="globalSettings">健身房</el-menu-item>
            <el-menu-item index="globalSettings">儿童游乐设施</el-menu-item>
            <el-menu-item index="globalSettings">广场舞</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="globalSettings"><i class="el-icon-school"></i>儿童接送</el-menu-item>
          <el-menu-item index="globalSettings"><i class="el-icon-truck"></i>跑腿服务</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title><i class="el-icon-s-help"></i>公共事务</template>
          <el-menu-item index="globalSettings"><i class="el-icon-s-release"></i>公共事务报修处理</el-menu-item>
          <el-sub-menu index="7">
            <template #title><i class="el-icon-alarm-clock"></i>公共事务定时运转</template>
            <el-menu-item index="globalSettings">喷水系统</el-menu-item>
            <el-menu-item index="globalSettings">路灯开关</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="globalSettings"><i class="eel-icon-error"></i>投诉建议管理</el-menu-item>
          <el-menu-item index="globalSettings"><i class="el-icon-warning"></i>通知公告</el-menu-item>
          <el-menu-item index="globalSettings"><i class="el-icon-location-information"></i>智能巡检</el-menu-item>
          <el-menu-item index="globalSettings"><i class="el-icon-football"></i>失物招领</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="globalSettings"><i class="el-icon-money"></i>缴费管理</el-menu-item>
        <el-menu-item index="globalSettings"><i class="el-icon-sugar"></i>温情服务</el-menu-item>
      </el-menu>
    </div>
    <div class="half-circle" :class="{ 'ra-closed': isSidebarClosed }"></div>
    <el-button type="info" circle @click="toggleSidebar" class="sidebar-toggle" :class="{ 'button-closed': isSidebarClosed }">
      {{ isSidebarClosed ? '显示' : '隐藏' }}
    </el-button>
    <div class="main-content" :style="{ marginLeft: isSidebarClosed ? '0' : '250px' }">
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const isSidebarClosed = ref(true)
const bodyClass = ref('')

function toggleSidebar() {
  isSidebarClosed.value = !isSidebarClosed.value
  updateBodyClass()
}

function updateBodyClass() {
  if (isSidebarClosed.value) {
    bodyClass.value = ''
  } else {
    bodyClass.value = 'sidebar-open'
  }
  document.body.className = bodyClass.value
}

onMounted(() => {
  updateBodyClass()
})

onBeforeUnmount(() => {
  document.body.className = ''
})
</script>

<style scoped>

.main-content {
  margin-left: 230px; /* 根据侧边栏宽度设置左边距 */
  transition: margin-left 0.3s ease-in-out;
}

.sidebar.is-closed + .main-content {
  margin-left: 0; /* 当侧边栏隐藏时，主内容区域占满整个屏幕宽度 */
}

.sidebar-container {
  width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  transition: transform 0.3s ease-in-out;
  z-index: 1004;
  background-color:#545c64;
  border: none;
}
.sidebar-toggle {
  position: fixed;
  top: 49%;
  left: 190px;
  height: 45px;
  width: 45px;
  transform: translateY(-50%); /* 垂直居中并旋转90度 */
  transition: left 0.3s ease-in-out;
  z-index: 1005; /* 注意：这实际上是按钮旋转后的“宽度” */
  line-height: 30px; /* 调整以垂直居中内部文字（在旋转前）*/
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
}
.half-circle {
  position: fixed; /* 改为fixed以在滚动时保持位置 */
  top: 44%;
  left: 150px;
  transition: left 0.3s ease-in-out;
  width: 80px; /* 圆的直径 */
  height: 80px; /* 圆的直径 */
  background-color: #545c64; /* 圆的颜色 */
  border-radius: 50%; /* 创建一个完整的圆形 */
  z-index: 1002;
}
.sidebar-container.is-closed {
  transform: translateX(-250px);
}

.main-content {
  transition: margin-left 0.3s ease-in-out;
}
.is-closed {
  background-color: #545c64;
}
.button-closed {
  left: -10px;
  transition: left 0.3s ease-in-out;
}
.ra-closed{
  left: -50px;
  transition: left 0.3s ease-in-out;
}
</style>
